<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>菜单查询</title>
        <header th:replace="header::html"></header>
    </head>
    <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">权限</a>
        <a>
          <cite>权限列表</cite></a>
      </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>

    <div class="x-body">

        <div class="layui-fluid">
            <div class="layui-row  layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">

                        <div class="layui-card-header">
                            <form class="layui-form layui-col-md12 x-so" id="layuiFormPermission">
                                <a class="layui-btn" id="crollAll" >折叠展开</a>
                                <a class="layui-btn" onclick="xadmin.open('新增权限','/permission/add')" permission="sys:menu:add"><i class="layui-icon"></i>新增权限</a>
                            </form>
                        </div>

                        <div class="layui-card-body ">
                            <table class="layui-hide" id="menuTable" lay-filter="member"></table>
                        </div>

                        <div class="layui-card-body ">
                            <script type="text/html" id="barDemo" >
                                <a class="layui-btn layui-btn-xs" lay-event="edit" permission="sys:menu:edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" permission="sys:menu:del">删除</a>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        var treetable, renderTable;

        layui.config({
            base: '/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use('treetable', function () {
            var table = layui.table;
            var $ = layui.jquery;
            var treetable = layui.treetable;

            renderTable = function(){
                treetable.render({
                    // 渲染表格
                    treeColIndex: 1,// treetable新增参数
                    treeSpid: 0,
                    treeIdName:'id',// treetable新增参数
                    treePidName: 'parentId',     // treetable新增参数
                    treeLinkage: true,        // treetable新增参数
                    elem: '#menuTable',
                    url: '/permission/menuAll',
                    cols: [
                        [
                            {type: 'numbers'},
                            {field: 'name',width:180, title: '名称'},
                            {field: 'href',width:160, title: 'url'},
                            {field: 'sort',width:60, title: '排序'},
                            {field:'permission',title:'资源标识'},
                            {field:'type',width:60,title:'类型',templet:function(d){
                                    return  d.type == '1' ? "菜单":"按钮";
                                }},
                            {title:'操作',toolbar:'#barDemo'}
                        ]
                    ],
                    // done:function(){
                    //     checkPermission();
                    // }
                });
            };
            renderTable();

            /**
             * 折叠
             */
            var croll = false;
            $("#crollAll").click(function () {
                if(croll){
                    treetable.expandAll('#menuTable');
                    croll=false;
                }else{
                    treetable.foldAll('#menuTable');
                    croll=true;
                }
            });

            //监听工具条
            table.on('tool(member)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/permission/delete",
                            type: "GET",
                            data: {id: data.id},
                            dataType: 'json',
                            success: function (result) {
                                layer.alert("删除成功", {icon: 1}, function (index1) {
                                    layer.close(index1);
                                    xadmin.father_reload();
                                    //table.reload('table');
                                });
                            },
                        });

                    });
                } else if (obj.event === 'edit') {
                    xadmin.open('编辑用户信息', '/permission/edit?id=' + data.id);
                }
            });
            // checkPermission();
        });
    </script>
    </body>

</html>